<template>
  <a-drawer
    title="系统配置"
    placement="right"
    :visible="visible"
    width="360"
    @close="$emit('update:visible', false)"
  >
    <div>
      <a-form :model="systemConfig" layout="vertical">
        <a-form-item label="布局">
          <a-radio-group v-model:value="systemConfig.layout">
            <a-radio value="vertical">垂直</a-radio>
            <a-radio value="horizontal">顶部导航布局</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="页面风格">
          <a-radio-group v-model:value="systemConfig.theme">
            <a-radio value="light">白天</a-radio>
            <a-radio value="dark">黑夜</a-radio>
            <a-radio value="fixed">混合</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="主题颜色">
          <div class="color-picker">
            <div class="color-picker-panel">
              <span
                v-for="color in colors"
                :key="color"
                :style="{
                  backgroundColor: color,
                  width: '24px',
                  height: '24px',
                  borderRadius: '4px',
                  marginRight: '8px',
                  display: 'inline-block',
                  cursor: 'pointer',
                  border:
                    systemConfig.primaryColor === color
                      ? '2px solid ' + color
                      : 'none',
                  boxShadow:
                    systemConfig.primaryColor === color
                      ? '0 0 5px ' + color
                      : 'none',
                  transform:
                    systemConfig.primaryColor === color
                      ? 'scale(1.1)'
                      : 'scale(1)',
                  transition: 'all 0.2s ease',
                }"
                @click="systemConfig.primaryColor = color"
              ></span>
            </div>
            <a-input
              type="color"
              v-model:value="systemConfig.primaryColor"
              style="margin-top: 10px; width: 100px"
              placeholder="输入颜色值"
            ></a-input>
          </div>
        </a-form-item>

        <a-form-item label="显示tab栏">
          <a-switch
            checked-children="显示"
            unCheckedChildren="关闭"
            v-model:checked="systemConfig.showTabs"
          />
        </a-form-item>

        <a-form-item label="圆角">
          <a-input-number
            style="width: 100px"
            :min="0"
            :max="100"
            v-model:value="systemConfig.borderRadius"
          />
        </a-form-item>
        <a-form-item label="Menu宽度">
          <a-slider
            v-model:value="systemConfig.menuWidth"
            :min="200"
            :max="400"
          />
        </a-form-item>
        <a-form-item label="Header高度">
          <a-slider
            v-model:value="systemConfig.headerHeight"
            :min="48"
            :max="64"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { useSystemConfig } from "@/store/systemConfig.js";

defineProps({
  visible: Boolean,
});

defineEmits(["update:visible"]);

const systemConfig = useSystemConfig();
const colors = [
  "#1890ff",
  "#52c41a",
  "#faad14",
  "#f5222d",
  "#722ed1",
  "#13c2c2",
  "#eb2f96",
  "rgb(60,60,60)",
];
</script>

<style scoped>
</style>